<template>
  <div class="qrcode-form">
    <add-base-form
      ref="addForm"
      v-if="opType === '1'"
      :form="form"
      :rules="formRules">
      <el-form-item
        class="label-pr2"
        :label="$t('流媒体地址')"
        prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="3" wrap="off"
          maxlength="300"
          :show-word-limit="false"
          clearable></el-input>
      </el-form-item>
    </add-base-form>
    <edit-base-form
      ref="editForm"
      v-else-if="opType === '2'"
      :form="form"
      :rules="formRules">
      <el-form-item class="label-pr2" :label="$t('流媒体地址')">
        <el-input :value="form.content" type="textarea" :rows="3" clearable></el-input>
      </el-form-item>
    </edit-base-form>
  </div>
</template>

<script>
import AddBaseForm from './AddBaseForm'
import EditBaseForm from './EditBaseForm'
export default {
  components: {
    AddBaseForm,
    EditBaseForm
  },
  props: {
    opType: {
      type: String,
      default: '1'
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formRules: {
        name: [
          { required: true, message: '名称不能为空' }
        ],
        content: [
          { required: true, message: '流媒体地址不能为空' }
        ]
      }
    }
  },
  methods: {
    validate(cb) {
      if (this.opType === '1') {
        this.$refs.addForm.$refs.form.validate(cb)
      } else {
        this.$refs.editForm.$refs.form.validate(cb)
      }
    },
    clearValidate(params) {
      if (this.opType === '1') {
        this.$refs.addForm.$refs.form.clearValidate(params)
      } else {
        this.$refs.editForm.$refs.form.clearValidate(params)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.label-pr2 {
  ::v-deep .el-form-item__label {
    padding-right: 2px;
  }
}
</style>